<template>
  <div name="news" class="snews">
    <span>最新动态</span>
    <div class="newsList" @mouseover="mouseOver" @mouseout="mouseOut">
      <ul id="con1" ref="con1" :class="{ anim: animate == true }">
        <li v-for="d in items" :key="d.ID" class="newsItem">
          <span class="ell">【{{ d.department }}】{{ d.name }}</span>
          <i>{{ d.release_time }}</i>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "news",
  data() {
    return {
      animate: false,
      timer: "",
      items: [
        { title: "新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1", id: 1 },
        { title: "新闻2", id: 2 },
        { title: "新闻3", id: 3 },
      ],
    };
  },
  components: {},
  created() {
    // this.a = this.su.getnum(9);
  },
	
  mounted() {
		this.getNewsData();
    this.timer = setInterval(this.scroll, 2000);
  },
  methods: {
    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的末尾
        this.items.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 1000);
    },
    getNewsData() {
      this.$http
        .get("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/getNewDT")
        .then(res => {
          if (res.code == 0) {
            this.items = res.data;
          }
        })
        .catch(err => {
          console.log(err.message || "数据异常");
        });
    },
    mouseOver() {
      console.log("鼠标悬停");
      clearInterval(this.timer);
    },
    mouseOut() {
      console.log("鼠标移出");
      this.timer = setInterval(this.scroll, 2000);
    },
  },
};
</script>
